<template>
  <div class="acti_progress">
    <van-nav-bar title="参与秒杀" left-arrow   @click-left="onClickLeft">
    </van-nav-bar>
    <div class="acti_progress_view">
      <van-steps direction="vertical" :active="active" active-color="red" active-icon="fire">
         <!-- 秒杀界面第一步 (开始秒杀)-->
        <van-step>
          <div class="acti_progress_view_start" >
            <span v-show="active!=0 && skillResult==true" class="seckilled">已参与秒杀</span>
            <span v-show="skillResult==false" class="seckilled">秒杀失败</span>
          <div v-show="active==0">
            <!-- 标题 -->
            <span class="acti_progress_view_start_title" v-show="flag==true">活动已经开始</span>
            
              <!-- 倒计时 -->
            <div class="acti_progress_view_start_countdown" >
                <div class="acti_progress_view_start_time" >倒计时</div>
                <van-count-down :time="time" @finish="timeFinish" />
              </div>
              <!-- 产品meta -->
              <div class="acti_progress_view_start_meta">
                {{actiData.activity_name}}
              </div>
              <!-- 产品text -->
              <div class="acti_progress_view_start_disc">
                {{actiData.product_description}}
                <!-- 万家基金管理有限公司出品 收益实力派 -->
              </div>
              <!-- 标签 -->
              <div class="acti_progress_view_start_label" v-show="actiData.product.product_tags.length>0">
                <span v-for="(item,index) in actiData.product.product_tags" :key="index">{{item}}</span>
              </div> 
              <div class="acti_progress_view_start_rateAndMoney">
                <div>
                  <!-- 百分比 -->
                  <span>+{{actiData.product.product_interest_rate}}%</span>
                  <!-- discrible -->
                  <div class="acti_progress_view_start_rate">近一年收益率</div>
                </div>
                <div class="acti_progress_view_start_money">
                  ￥{{actiData.product.product_price}}
                </div>
              </div>
            </div>
          </div>
        </van-step>
        <!-- 第二步 (付费)-->
        <van-step>
          <div v-show="active==0">
            等待支付
          </div>
          <div class="acti_progress_view_start">
            <span v-show="active==2" class="seckilled">支付成功</span>
            <div v-show="active==1">
            <!-- 标题 -->
            <span class="acti_progress_view_start_title" v-show="active==1">等待支付</span>
            <!-- <span class="acti_progress_view_start_title" v-show="flag==false">活动已经开始</span> -->

              <!-- 产品meta -->
              <div class="acti_progress_view_start_meta">
                {{actiData.activity_name}}
              </div>
              <!-- 产品text -->
              <div class="acti_progress_view_start_disc">
                {{actiData.product_description}}
              </div>
              <!-- 标签 -->
              <div class="acti_progress_view_start_label" v-show="actiData.product.product_tags.length>0">
                <span v-for="(item,index) in actiData.product.product_tags" :key="index">{{item}}</span>
              </div> 
              <div class="acti_progress_view_start_rateAndMoney">
                <div>
                  <!-- 百分比 -->
                  <span>+{{actiData.product.product_interest_rate}}%</span>
                  <!-- discrible -->
                  <div class="acti_progress_view_start_rate">近一年收益率</div>
                </div>
                <div class="acti_progress_view_start_money">
                  ￥{{actiData.product.product_price}}
                </div>
              </div>
              <div class="acti_progress_view_start_messagePay">您已参与本次活动秒杀，请尽快支付。</div>
            </div>
          </div>
        </van-step>
        <!-- 第三步 (秒杀成功)-->
        <van-step>
          <div v-show="active!=2">
            秒杀成功
          </div>
          <div class="acti_progress_view_start">
            <!-- <span v-show="active==2" class="seckilled">支付成功</span> -->
            <div v-show="active==2">
            <!-- 标题 -->
            <span class="acti_progress_view_start_title" v-show="active==2">秒杀成功</span>
            <!-- <span class="acti_progress_view_start_title" v-show="flag==false">活动已经开始</span> -->

              <!-- 产品meta -->
              <div class="acti_progress_view_start_meta">
                {{actiData.activity_name}}
              </div>
              <!-- 产品text -->
              <div class="acti_progress_view_start_disc">
                {{actiData.product_description}}
              </div>
              <!-- 标签 -->
              <div class="acti_progress_view_start_label" v-show="actiData.product.product_tags.length>0">
                <span v-for="(item,index) in actiData.product.product_tags" :key="index">{{item}}</span>
              </div> 
              <div class="acti_progress_view_start_rateAndMoney">
                <div>
                  <!-- 百分比 -->
                  <span>+{{actiData.product.product_interest_rate}}%</span>
                  <!-- discrible -->
                  <div class="acti_progress_view_start_rate">近一年收益率</div>
                </div>
                <div class="acti_progress_view_start_money">
                  ￥{{actiData.product.product_price}}
                </div>
              </div>
              <div class="acti_progress_view_start_messagePay" v-show="active==1">您已参与本次活动秒杀，请尽快支付。</div>
            </div>
          </div>
        </van-step>
        
      </van-steps>
      <div class="acti_progress_view_buttom1" v-show="secFaile">秒杀失败</div>
      <div class="acti_progress_view_buttom2" v-show="flag==false && active==0 && waitSkill==false" @click="startSeckill">开始秒杀</div>
      <div class="acti_progress_view_buttom2" v-show="waitSkill==true">秒杀中...</div>
      <div class="acti_progress_view_buttom2" v-show="active==1" @click="SecPayment">立即支付</div>
      <div class="acti_progress_view_pruchaseSuccess" v-show="active==2"> 恭喜您已经成功秒杀此产品！</div>
    </div>
    <!-- 确认支付 -->
    <van-dialog v-model="show" title="提示" show-cancel-button @confirm="confirmPay">
      <div class="acti_progress_payConfirm">确认支付</div>
    </van-dialog>
    <!-- 支付成功 -->
    <van-dialog v-model="Secshow" title="提示" @confirm="SecconfirmPay">
      <div class="acti_progress_payConfirm">支付成功</div>
    </van-dialog>
    <!-- 秒杀失败\成功提醒 -->
    <van-dialog v-model="actiQuery.skillFaildefalie" title="提示" @confirm="activitySkillFail">
      <div class="acti_progress_payConfirm">秒杀失败</div>
    </van-dialog>
    <van-dialog v-model="actiQuery.skillFailSuccess" title="提示" @confirm="activitySkillSuccess">
      <div class="acti_progress_payConfirm">秒杀成功</div>
    </van-dialog>
  </div>
</template>

<script>
import {queryResult , getActivityGuidanceInfo , participateActi , getVerifyCode , getResult} from '@/api/activity'
export default {
  data(){
    return {
      actiData:{
        product: {
          product_description: '',
          product_tags: []
        }
      },
      //步骤条
      active:0,
      // time: 30 * 60 * 60 * 1000,
      // 倒计时时间
      time: 0,
      // 倒计时结束前显示dom
      flag:true,
      // 确认支付弹框
      show:false,
      // 支付成功弹框
      Secshow:false,
      // 秒杀成功\失败提示
      actiQuery :{
        skillFailSuccess:false,
        skillFaildefalie:false,
        msg:'',
        result:'',
      },
      // setInterval定时器原型， 先将其指向Vue原型
      timer:null,
      //开会秒杀\ 秒杀中...
      waitSkill:false,
      // 秒杀结果
      skillResult:true,
      status:'',
      secFaile:false,
      verify:'',
    }
  },
  created(){
    this.getStatus()
    this.getActiGuidanceInfo(),
    this.getVerify()
  },
  destroyed() {
      clearInterval(this.timer);
      this.timer = null;
      this.$toast.clear();
  },
  methods:{
    getActiGuidanceInfo(){
      let str = this.$route.query.q
      let t = parseInt(str)
      getActivityGuidanceInfo(t).then(res=>{
        this.actiData = res.data
      })
    },
    // 获取验证码
    getVerify(){
      let str = this.$route.query.q
      let t = parseInt(str);
      getVerifyCode(t).then(res=>{
        this.verify = res.data.verify_code
      })
    },
    // 初始化状态
    getStatus(){
        let status = this.$store.state.status
        if(status==0) {
          let tt  = this.$store.state.acti
          getResult(tt).then(res=> {
            let result = res.data.status
            if(result==-1){
              this.skillResult = false;
              this.actiQuery.skillFaildefalie  = true;
              this.actiQuery.msg = "秒杀失败"
            }else if(result==1){
              this.actiQuery.skillFailSuccess = true;
              this.active = 2;
              this.actiQuery.msg = "已成功参与秒杀"
            }else if(result==-2){
              this.$toast.loading('秒杀中...');
              this.waitSkill = true
              this.timer  = setInterval(()=>{
                this.$toast.loading('等待秒杀结果...');
                getResult(tt).then(res=> {
                  if(res.data.status==1) {
                    this.waitSkill = false;
                    this.$toast.clear();
                    this.active = 1;
                    this.actiQuery.skillFailSuccess  = true;
                    this.skillResult = true 
                    clearInterval(this.timer);
                  }else if(res.data.status==-1){
                    this.waitSkill = false;
                    this.$toast.clear();
                    this.skillResult = false;
                    this.actiQuery.skillFaildefalie  = true;
                    this.actiQuery.msg = "秒杀失败"
                    clearInterval(this.timer);
                  }
                })
              },2000)
            }
          })
        }
    },
    // 秒杀成功提醒
    activitySkillSuccess(){
      this.actiQuery.activitySkillSuccess = false;
    },
    // 秒杀失败提醒
    activitySkillFail(){
      this.$router.push('/home/activity')
      
    },
    // 路由返回
    onClickLeft(){
      this.$router.go(-1)
    },
    // 时间完成
    timeFinish(){
      this.flag = false
    },
    // 初始化时间，映射倒计时dom
    judgeTime(){
      if(this.time==0) {
        this.time = false
      }
    },
    // 开始秒杀 , 并根据查询秒杀结果做出对应行为
    startSeckill(){
      // this.active= 1;
      let str = this.$route.query.q
      let t = parseInt(str);
        this.$toast.loading('开始秒杀');
        // let d = this.$store.state.acti
         let tt  = this.$store.state.acti
        participateActi(tt,this.verify)
        getResult(tt).then(result=>{
          let res = result.data.status
          setTimeout(()=>{
            if(res==1) {
              this.$toast.clear();
              this.active = 1;
              this.actiQuery.skillFailSuccess  = true;
              this.actiQuery.msg ="秒杀成功";
              this.skillResult = true
            }else if(res==-1){
              this.$toast.clear();
              this.skillResult = false;
              this.actiQuery.skillFaildefalie  = true;
              this.actiQuery.msg = "秒杀失败"
            }
            else {
                let  len = 0;
                this.$toast.loading('秒杀中...');
                this.timer  = setInterval(()=>{
                  this.$toast.loading('等待秒杀结果...');
                  this.waitSkill = true
                  getResult(tt).then(res=> {
                    if(res.data.status==1) {
                      this.waitSkill = false;
                      this.$toast.clear();
                      this.active = 1;
                      this.actiQuery.skillFailSuccess  = true;
                      this.skillResult = true 
                      clearInterval(this.timer);
                    }else if(res.data.status==-1){
                      this.waitSkill = false;
                      this.$toast.clear();
                      this.skillResult = false;
                      this.actiQuery.skillFaildefalie  = true;
                      clearInterval(this.timer);
                    }
                  })
                },2000)
          }
          },2000)
        })
        

    },
    // 确认支付弹框显示按钮
    SecPayment(){
      this.show = true
      
    },
    // 确认支付弹框
    confirmPay(){
      this.$toast.loading("支付中");
      setTimeout(()=>{
        this.$toast.clear();
        this.Secshow = true
        
        this.active = 2;
      },1000)
    },
    // 支付成功弹框关闭
    SecconfirmPay(){
      this.Secshow = false;
    }
  },
}
</script>

<style lang="less">
 .van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
  .acti_progress_view{
    margin: 10px auto;
    padding-left: 10px;
    // margin-left: px;
    // margin-top: 10px;
    width: 95%;
    height: 500px;
    border-radius: 0px 0px 33px 33px;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    font-family: Arial;
    border: 1px solid rgba(187, 187, 187, 100);
    background-color: white;
  }
 
  .acti_progress_view_pruchaseSuccess{
    display: flex;
    justify-content: center;
    align-items: center;
    // margin: 10px auto;
    color: rgba(16, 16, 16, 100);
    font-size: 20px;
    // text-align: center;
    font-family: PingFangSC-regular;
    margin-top: 5px;
    font-weight: bold;
  }
  // 等待活动开始时按钮
  .acti_progress_view_buttom1{
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin: 10px auto;
    border-radius: 18px;
    background-color: rgba(191, 191, 191, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
  }
  // 活动开始时按钮
  .acti_progress_view_buttom2{
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin: 10px auto;
    border-radius: 17px;
    background-color: rgba(207, 19, 34, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    font-family: Microsoft Yahei;
  }
  .acti_progress_view_start{
    display: flex;
    flex-direction: column;
    width: 90%;
    text-align: left;
     .seckilled{
    color: rgb(0, 0, 0);
    font-size: 16px;
    text-align: left;
    font-family: PingFangSC-regular;
  }
    .acti_progress_view_start_title{
      font-family: PingFangSC-regular;
      font-weight:bold;
      color: rgb(0, 0, 0);
      font-size: 18px;
    }
    .acti_progress_view_start_countdown{
      width: 50%;
      font-size: 18px;
      margin-top: 5px;
      margin-left: 5px;
      // margin: 5px auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #151515;
    }
    .acti_progress_view_start_meta{
      margin-top: 5px;
      color: rgb(230, 128, 128);
      font-size: 18px;
       overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap
    }
    .acti_progress_view_start_disc{
      margin-top: 5px;
      font-size: 15px;
      color: #151515;
    }
    .acti_progress_view_start_label{
      width: 80%;
      // height: 25px;
      // border: 1px solid red;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        height: 22px;
        // width: %;
        line-height: 22px;
        margin-right: 20px;
        // opacity: 0.38;
        background-color: #F3A5AC;
        color: rgb(0, 0, 0);
        font-size: 14px;
        text-align: center;
        font-family: Arial;
        border: 1px solid rgba(187, 187, 187, 100);
      }
    }
    span{
      margin-top: 5px;
      margin-bottom: 5px;
      color: rgba(224, 19, 36, 100);
      font-family: PingFangSC-semiBold;
      font-size: 18px;
    }
    .acti_progress_view_start_rateAndMoney{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
      .acti_progress_view_start_rate{
      color: rgb(56, 56, 56);
      font-size: 12px;
      text-align: left;
      font-family: PingFangSC-regular;
      }
      .acti_progress_view_start_money{
        margin-right: 25px;
        color: rgba(64, 64, 64, 100);
        font-size: 20px;
        text-align: left;
        font-family: PingFangSC-semiBold;
      }
    }
    .acti_progress_view_start_messagePay{
      margin-top: 15px;
      color: rgba(16, 16, 16, 100);
      font-size: 16px;
      text-align: center;
      font-family: PingFangSC-regular;
    }
  }
  .acti_progress_payConfirm{
    margin: 0 auto;
    width: 200px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  
</style>